<MDXHeader
  title="Menubar"
  description="A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands."
  docs="https://ui.shadcn.com/docs/components/menubar"
/>

<ComponentPreview name="menubar-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash
npx solidui-cli@latest add menubar
```

</TabsContent>

<TabsContent value="manual">
<Steps>

<Step>Install the following dependencies: </Step>

```bash
npm install @kobalte/core
```

<Step>Copy and paste the following code into your project: </Step>

<ComponentSource name="menubar" />

</Steps>
</TabsContent>

</Tabs>

## Usage

```tsx
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger
} from "~/components/ui/menubar"
```

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```
